import React, {Component} from 'react'
import {connect} from 'react-redux'
import UserRouter from '../index'
import {formControlLayout, formLayout, AutoEmail} from '../../register'
import {Form, Button, Input, message, Radio} from 'antd'
import {eventEmitter, post} from '../../../common/js/utils'

const FormItem = Form.Item

function mapStateToProps(state, props) {
  return {
    userInfo: state.get('userInfo')
  }
}

@Form.create()
@connect(mapStateToProps)
class SettingRouter extends Component {

  state = {
    loading: false,
    isEdit: false
  }

  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        post('/api/users/base', values, loading => {
          this.setState({loading})
        }).then(res => {
          if (res.result === 1) {
            message.success('修改成功')
            this.setState({
              isEdit: false
            })
            eventEmitter.emit('userInfo')
          }
        })
      }
    })
  }

  handleEdit = e => {
    e.preventDefault()
    const {setFieldsValue} = this.props.form
    const {userInfo} = this.props
    this.setState({
      isEdit: !this.state.isEdit
    }, () => {
      setFieldsValue({
        nickname: userInfo.get('nickname'),
        email: userInfo.get('email')
      })
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form
    const {isEdit} = this.state
    const {userInfo} = this.props

    return (
      <UserRouter>
        <Form
          onSubmit={this.handleSubmit}
          style={{
            width: '500px'
          }}
        >
          <FormItem
            {...formLayout}
            label="昵称"
          >
            {
              getFieldDecorator('nickname', {
                initialValue: userInfo.get('nickname'),
                rules: [{
                  required: true,
                  message: '请输入昵称'
                }, {
                  max: 12,
                  message: '昵称最多12个字符'
                }]
              })(<Input disabled={!isEdit} placeholder="请输入昵称"/>)
            }
          </FormItem>
          <FormItem
            {...formLayout}
            label="E-mail"
          >
            {
              getFieldDecorator('email', {
                initialValue: userInfo.get('email'),
                rules: [{
                  required: true,
                  message: '请输入邮箱'
                }, {
                  type: 'email',
                  message: '请输入正确的邮箱'
                }]
              })(<AutoEmail disabled={!isEdit} />)
            }
          </FormItem>
          <FormItem
            {...formLayout}
            label="性别"
          >
            {
              getFieldDecorator('sex', {
                initialValue: userInfo.get('sex')
              })(
                <Radio.Group
                  disabled={!isEdit}
                >
                  <Radio value={1}>
                    男
                  </Radio>
                  <Radio value={0}>
                    女
                  </Radio>
                </Radio.Group>
              )
            }
          </FormItem>
          <FormItem
            {...formLayout}
            label="自我简介"
          >
            {
              getFieldDecorator('introduce', {
                initialValue: userInfo.get('introduce'),
                rules: [{
                  max: 30,
                  message: '简介最多30个字符'
                }]
              })(
                <Input.TextArea
                  disabled={!isEdit}
                  placeholder="请输入自我简介"
                  style={{
                    height: 100
                  }}
                />
              )
            }
          </FormItem>
          {
            this.state.isEdit
              ? <FormItem
                  {...formControlLayout}
                >
                  <Button loading={this.state.loading} type="primary" htmlType="submit">保存</Button>
                  &nbsp;&nbsp;
                  <Button onClick={this.handleEdit}>取消</Button>
                </FormItem>
              : <FormItem
                  {...formControlLayout}
                >
                  <Button type="primary" htmlType="button" onClick={this.handleEdit} >修改</Button>
                </FormItem>
          }
        </Form>
      </UserRouter>
    )
  }
}

export default SettingRouter